前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • React专栏

    • React组合式开发实战

      • 前端开发的四个时代
      • 企业管理系统的前世今生
      • 可视化页面搭建工具
      • 实战篇 01:开发前准备
      • 实战篇 02:项目脚手架
      • 实战篇 03:页面布局方案
      • 实战篇 04:权限管理机制
      • 实战篇 05:菜单匹配逻辑
      • 实战篇 06:消息通知设计
      • 实战篇 07:多语言支持
      • 继往开来:可视化页面搭建工具
    • React Hooks与Immutable实战

    • React SSR服务端渲染与同构实践

    • IM聊天系统前端开发实践

    • 微前端开发实战

    • React进阶实践

  • Vue专栏

  • 移动端专栏

  • Node专栏

  • 前端工程化专栏

  • 算法专栏

  • Typescript专栏

  • 其他专栏

完整面试题地址:
作者:程序员poetry
扫码关注作者公众号:「前端进阶之旅」 每天分享技术干货
前端进阶之旅公众号二维码

# 赋值断言、is 关键字、可调用类型注解和类型推导

到本节为止,我们可以说已经把 TypeScript 的基础知识阶段的内容大致学完了,但是依然有几个零碎的知识点我们没有提到,这里做一个补充。

然后我们会有一个小小的实战环节,之后我们就可以在生产环境中使用 TypeScript,也就是说在 TypeScript 的业务代码编写层面是不会有太多问题了。

# 明确赋值断言

TypeScript 2.7 引入了一个新的控制严格性的标记: --strictPropertyInitialization

它的作用就是保证变量声明和实例属性都会有初始值:

class StrictClass {
    foo: number;
    bar = 'hello';
    baz: boolean; // 属性“baz”没有初始化表达式,且未在构造函数中明确赋值
    constructor() {
        this.foo = 42;
    }
}
@前端进阶之旅: 代码已经复制到剪贴板

这个功能本来是帮助开发者写出更严格的代码的,但是有的时候它并不是开发者的错误,而是不可避免的情况:

  • 该属性本来就可以是 undefined,这种情况下添加类型undefined
  • 属性被间接初始化了(例如构造函数中调用一个方法,更改了属性的值)

显然编译器没有开发者聪明,我们需要提醒编译器这里并不需要一个初始值,这就需要「明确赋值断言」。

明确赋值断言是一项功能,它允许将!放置在实例属性和变量声明之后,来表明此属性已经确定它已经被赋值了:

let x: number;
initialize();
console.log(x + x); // 在赋值前使用了变量“x”。ts(2454)
function initialize() {
    x = 10;
}
@前端进阶之旅: 代码已经复制到剪贴板

上面的例子就很棘手,我们明明已经间接地赋值了,但是它依然报错,因此我们 let x!: number 来修复此问题,同样也可以在表达式中直接使用:

let x: number;
initialize();
console.log(x! + x!); //ok

function initialize() {
    x = 10;
}
@前端进阶之旅: 代码已经复制到剪贴板

# is 关键字

如果你阅读过一些 TypeScript 代码,可能会看到类似于下面这种情况:

export function foo(arg: string): arg is MyType {
    return ...
}
@前端进阶之旅: 代码已经复制到剪贴板

你会好奇 arg is MyType 的 is 关键字是干什么的?然而 TypeScript 文档中几乎没有体现它的用法.

看下面的例子:

function isString(test: any): test is string{
    return typeof test === 'string';
}

function example(foo: number | string){
    if(isString(foo)){
        console.log('it is a string' + foo);
        console.log(foo.length); // string function
    }
}
example('hello world');
@前端进阶之旅: 代码已经复制到剪贴板

其实他的作用就是判断 test 是不是 string 类型,并根

fe
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • React专栏

    • React组合式开发实战

      • 前端开发的四个时代
      • 企业管理系统的前世今生
      • 可视化页面搭建工具
      • 实战篇 01:开发前准备
      • 实战篇 02:项目脚手架
      • 实战篇 03:页面布局方案
      • 实战篇 04:权限管理机制
      • 实战篇 05:菜单匹配逻辑
      • 实战篇 06:消息通知设计
      • 实战篇 07:多语言支持
      • 继往开来:可视化页面搭建工具
    • React Hooks与Immutable实战

    • React SSR服务端渲染与同构实践

    • IM聊天系统前端开发实践

    • 微前端开发实战

    • React进阶实践

  • Vue专栏

  • 移动端专栏

  • Node专栏

  • 前端工程化专栏

  • 算法专栏

  • Typescript专栏

  • 其他专栏